<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
<link rel="stylesheet" href="/resource/css/index.css">
<style type="text/css">
	img {
		max-width: 800px;
	}
</style>
</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			
			<div class="float-right align-items-center" >
			<br>
				<!-- 右侧的个人中心和退出按钮 -->
				<!-- 如果已经登录，则显示个人中心和退出 -->
					<c:if test="${LOGIN_USER!=null }">
						你好，<b>${LOGIN_USER.nickname }</b>
						<input class="btn btn-primary btn-sm" type="button" onclick="toCenter()" value="${LOGIN_USER.role==0?'个人中心':'管理员中心' }">
						<input class="btn btn-primary btn-sm" type="button" onclick="logout()" value="退出">
					</c:if>
					
					<!-- 如果没有登录，则显示登录和注册按钮 -->
					<c:if test="${LOGIN_USER==null }">
						<input class="btn btn-primary btn-sm" type="button" onclick="toLogin()" value="登录">
						<input class="btn btn-primary btn-sm" type="button" onclick="toReg()" value="注册">
					</c:if>
			</div><br>
		<hr>
		</div>
		
		<!-- 正文 -->
		<div class="row">
			<div class="col-md-2"></div>
			
			<div class="col-md-8">
				<h3><b>${article.title }</b></h3><br>
				<p>作者：${article.userName }  发布时间：<fmt:formatDate value="${article.created }" pattern="yyyy-MM-dd HH:mm:ss"/>
				<span id="coll"></span>
				<input type="hidden" id="collectId" >
				</p>
				<hr>
				${article.content }
				
				<hr>
				
				  <div>
				  	 <form action="" id="comment">
								<input type="hidden" value="${article.id }" name="articleId">
							 	文章评论：
							    <textarea rows="5" cols="100" name="content"></textarea>
					 </form>
					 
					 <c:if test="${sessionScope.LOGIN_USER!=null }">
						  <input type="button" onclick="addComments()" value="提交评论" class="btn btn-info">
					  </c:if>
					  
					  <c:if test="${sessionScope.LOGIN_USER==null }">
					    <span class="text-danger">请登录后再评论</a></span>
					  </c:if>
				  </div>
				  <hr>
				  <!-- 显示评论 -->
				  
				  <div>
					   <c:forEach items="${info.list}" var="comment">
						     <p>${comment.username}·<fmt:formatDate value="${comment.created}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
						     <p>${comment.content }</p>
					     <hr>
					   </c:forEach>
				  
				  		<!-- 评论分页 -->
				  	   <jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
			  	  </div>
			  
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		//文章点击量
		var id=${article.id};
		$.post(
			"/addHit",
			{id:id},
			function(){
				
			}
		)
		
		//获取当前用户
		var user = '${LOGIN_USER}';
		if(user != null && user != ''){
			//设置收藏
				$.post(
					"/my/getCollectByArticleId",
					{articleId:id},
					function(col){
						
						if(col != null && col!=''){
							//如果已经收藏
							$("#collectId").val(col.id);
							$("#coll").html("<input type='button' id='collect' value='★已收藏'  class='btn btn-success btn-sm' onclick='delCollect()'>");
		
						}else{
							//如果没有收藏

							$("#coll").html("<input type='button' id='collect' value='☆收藏'  class='btn btn-warning btn-sm' onclick='addCollect()'>");
							
						}
					}
				)
			
			}
		
	})

	//去个人中心
	function toCenter(){
		//获取角色role值
		var role = '${LOGIN_USER.role}';
		
		//判断role值
		if(role == 0){
			//普通用户
			location="/my/";
		}else{
			//超级管理员
			location="/admin/";
		}
	}
	
	//退出登录
	function logout(){
		location="/user/logout";
	}
	
	//添加评论
	function addComments(){
		
		$.post(
			"/addComments",
			$("#comment").serialize(),
			function(result){
				if(result){
					//刷新当前页面
					window.location.reload();
				}else{
					alert("评论失败，请重新登录");
				}
				
			}
		)
	}
	
	//分页参数
	function goPage(pageNum){
		location="/detail?pageNum="+pageNum +"&articleId="+'${article.id}';
	}
	
	//登录
	function toLogin(){
		location="/user/toLogin";
	}
	//注册
	function toReg(){
		location="/user/toReg";
	}
	
	//添加收藏
	function addCollect(){
		
		var articleId = "${article.id}";
		var text = "${article.title}";
		
		$.post(
			"/my/addCollect",
			{articleId:articleId,text:text},
			function(col){
				
				if(col != null && col!=''){
					$("#collectId").val(col.id);
					//如果已经收藏
					$("#coll").html("<input type='button' id='collect' value='★已收藏'  class='btn btn-success btn-sm' onclick='delCollect()'>");
	
				}else{
					alert("收藏失败！");						
				}
				
				
			}
		)
	}
	//取消收藏
	function delCollect(){
		
		var id = $("#collectId").val();
		$.post(
			"/my/delCollect",
			{id:id},
			function(result){
				if(result){
					$("#coll").html("<input type='button' id='collect' value='☆收藏'  class='btn btn-warning btn-sm' onclick='addCollect()'>");
				}else{
					
					alert("取消收藏失败！");
				}
			}
		)
	}

</script>
</html>